<template>
  <div class="account-action"
       @click.stop>
    <ButtonVessel button="edit"
                  v-if="hasButton('edit')"
                  @after-leave="handleEditBtnHide">
      <AccountNodeFormEdit ref="edit"
                           :account="account"
                           :template="template"
                           @success="handleSuccess" />
    </ButtonVessel>
    <ButtonVessel button="add"
                  v-if="hasButton('add')"
                  @after-leave="handleAddBtnHide">
      <AccountNodeFormAdd ref="add"
                          :account="account"
                          :template="template"
                          @success="handleSuccess" />
    </ButtonVessel>
    <ButtonVessel button="add-top"
                  v-if="hasButton('add-top')"
                  @after-leave="handleAddTopBtnHide">
      <AccountNodeFormAdd ref="add-top"
                          :account="account"
                          :template="template"
                          @success="handleSuccess" />
      <template v-slot:reference>
        <MappingTemplatesButton type="add"
                                @click.native="handleBodyClick">
          {{$t('custom.mapping.addAcount')}}
        </MappingTemplatesButton>
      </template>
    </ButtonVessel>
    <ButtonVessel button="delete"
                  v-if="hasButton('delete')"
                  component="popconfirm"
                  @confirm="handleDeleteAccount"
                  :title="$t('custom.accountMapping.deleteTemplate')"
                  :cancel-button-text="$t('cancel')"
                  :confirm-button-text="$t('confirm')" />
  </div>
</template>

<script>
import ButtonVessel from '@/components/button-vessel'
import AccountNodeFormEdit from './account-node-form-edit'
import AccountNodeFormAdd from './account-node-form-add'
import MappingTemplatesButton from './mapping-templates-button'
import { get } from 'lodash'

export default {
  name: 'AccountAction',
  components: {
    ButtonVessel,
    AccountNodeFormEdit,
    AccountNodeFormAdd,
    MappingTemplatesButton
  },
  props: {
    ignore: {
      type: Array,
      default: () => ([])
    },
    account: {
      type: Object,
      default: () => ({})
    },
    template: {
      type: Object,
      default: () => ({})
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {

    }
  },
  methods: {
    hasButton (type) {
      return !this.ignore.includes(type)
    },
    async handleDeleteAccount () {
      try {
        this.$emit('update:loading', true)
        const { deleteAccountItem } = this.$interface.mapping
        const params = {
          id: this.account.id,
          accountId: this.template.id
        }
        const { data: response } = await deleteAccountItem(params)

        if (response.code !== 0) {
          throw get(response, 'msg', '')
        }
        this.$message.success(this.$t('success'))
        this.handleSuccess()
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.$emit('update:loading', false)
      }
    },
    handleSuccess () {
      this.$emit('success')
      this.handleBodyClick()
    },
    handleEditBtnHide () {
      this.$refs.edit.resetFields()
    },
    handleAddBtnHide () {
      this.$refs.add.resetFields()
    },
    handleAddTopBtnHide () {
      this.$refs['add-top'].resetFields()
    },
    handleBodyClick () {
      document.body.click()
    }
  }
}
</script>
